<template>
  <div class="userInfoBox">
    <!-- eslint-disable-next-line no-trailing-spaces -->
    <HeadNav :title="'选择填报'"></HeadNav>
    <div
      class="content"
      :style="bottomHeight">
      <div class="contentTop">
        <div class="contentTop-left">
          <img
            src="../../assets/images/dangkou.png"
            alt=""
            style="width: 34px; height: 34px;">
        </div>
        <div class="contentTop-right">
          <div class="contentTop-right-top">运中食堂第一档口</div>
          <div class="contentTop-right-bottom">{{ currentDate }} 提交清单</div>
        </div>
      </div>
      <div class="contentBottom">
        <van-sidebar
          :active-key="activeKey"
          @change="onChangeSidebar">
          <van-sidebar-item
            v-for="(item, index) in sidebarList"
            :key="index"
            :title="item.cateName" />
        </van-sidebar>
        <div class="sidebar_content">
          <div
            class="goods-box"
            v-for="(item, index) in goodsList"
            :key="index"
            :id="index">
            <div class="goods-title">{{ item.title }}</div>
            <div class="goods-box-bottom">
              <div class="goods-price">￥{{ item.price }}</div>
              <div class="goods-num">
                <van-button
                  icon="minus"
                  type="info"
                  class="minus"
                  @click.stop="jian(index, item.id, item.selectNum)"></van-button>
                <div
                  class="selectnum"
                  @click="showInputNum(item, index)">{{ item.selectNum }}</div>
                <van-button
                  icon="plus"
                  type="primary"
                  class="plus"
                  @click.stop="add(index, item.Id)"></van-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup
      v-model="showInput"
      round
      @click-overlay="closePopup"
      style="width: 80%;height: 180px;"
      :closeable="true">
      <div class="pop_title">
        请输入数量
      </div>
      <van-field
        v-model="popUpNum"
        :border="true"
        style="width: 80%;height: 34px;margin: 14px auto 16px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 10px;" />
      <div
        class="sub_btn"
        @click="confirmFilter">
        确认
      </div>
    </van-popup>
    <van-popup
      v-model="showInput2"
      :closeable="true"
      round
      style="width: 80%;height: 180px;">
      <div class="top_title">你确认提交当前所选清单吗？</div>
      <div
        class="sub_btn"
        @click="submit2">
        确定
      </div>
    </van-popup>
    <van-popup
      v-model="showInput3"
      :closeable="true"
      position="bottom"
      style="width: 100%;height: auto">
      <div class="popupList">
        <div class="popupWrapper">
          <div class="top_title3">已添加清单</div>
          <!-- 清单具体内容 -->
          <div class="popup-goods-box">
            <!-- 清单主体内容 -->
            <div
              class="goods-box goods-box-top "
              v-for="(item, index) in goodsList"
              :key="index"
              :id="index">
              <div class="goods-title">{{ item.title }}</div>
              <div class="goods-box-bottom">
                <div class="goods-price">￥{{ item.price }}</div>
                <div class="goods-num">
                  <van-button
                    icon="minus"
                    type="info"
                    class="minus"
                    @click.stop="jian(index, item.id, item.selectNum)"></van-button>
                  <div
                    class="selectnum"
                    @click="showInputNum(item, index)">{{ item.selectNum }}</div>
                  <van-button
                    icon="plus"
                    type="primary"
                    class="plus"
                    @click.stop="add(index, item.Id)"></van-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 清淡页面的底部按钮区域 -->
        <div
          class="submitBar submitBar_popup"
          style="position: fixed">
          <div class="submitBar_left">
            <van-button
              info="5"
              @click="toRecordList"><img
                                      src="../../assets/images/cart.png"
                                      alt=""
                                      style="width: 25px; height: 25px;">
              <div class="cartInfo">5</div>
            </van-button>
            <div class="allPrice"> ￥795.00 </div>
          </div>
          <van-button
            type="primary"
            class="loginBtn"
            @click="onSubmit()">去提交 </van-button>
        </div>
      </div>
    </van-popup>

    <!-- <div class="submitBar">
        <van-button
          icon="cart-o"
          info="5"
          @click="toRecordList"></van-button>
        <div class="allPrice"> ￥795.00 <span style="margin-left: 10px; margin-right: 10px;">| </span> <span
          class="checked"
          @click="toRecordList">点击查看清单</span></div>
        <van-button
          type="primary"
          class="loginBtn"
          @click="onSubmit()">去提交 </van-button>
      </div> -->
    <div
      class="submitBar submitBar_width"
      ref="submitBar">
      <div class="submitBar_left">
        <van-button
          info="5"
          @click="toRecordList"><img
                                  src="../../assets/images/cart.png"
                                  alt=""
                                  style="width: 25px; height: 25px;">
          <div class="cartInfo">5</div>
        </van-button>
        <div class="allPrice"> ￥795.00 <span style="margin-left: 10px; margin-right: 10px;">| </span> <span
          class="checked"
          @click="toRecordList">点击查看清单</span></div>
      </div>
      <van-button
        type="primary"
        class="loginBtn"
        @click="onSubmit()">去提交 </van-button>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
//   import { getApplyCertificationPagePho, getVerifyTypeList } from '@/api/api'
import { getParams } from '@/common/public'
import HeadNav from '@/components/HeadNav'
import { Toast } from 'vant';
//   import moment from 'moment'
//   import { mapState } from 'vuex'
export default {
  name: 'SelectFillIn',
  components: {
    HeadNav,
  },
  computed: {},
  watch: {
    active(newVal) {
      console.log('newVal', newVal)
      if (newVal === 0) {
        this.params.applyType = null
        this.loading = true
        this.contentData = []
        this.finished = false
        if (!this.finished) {
          this.onLoad(1)
        }
      } else {
        this.params.applyType = newVal
        this.loading = true
        this.contentData = []
        this.finished = false
        if (!this.finished) {
          this.onLoad(1)
        }
      }
    }
  },
  data() {
    return {
      active: 0,
      sidebarList: [
        {
          cateName: '主食',
          goodsList: [

            {
              id: '101',
              title: '新东大鸡排  (件/20公斤)',
              price: '170.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '鱼丸\虾丸（件/10公斤）',
              price: '115.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '牛肉（斤）',
              price: '45',
              selectNum: 0,
            },
            {
              id: '101',
              title: '烤肠（件/12公斤）',
              price: '156.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '大鸡排（10袋）',
              price: '165.00',
              selectNum: 0,
            }
          ],
        },
        {
          cateName: '蔬菜水果',
          goodsList: [

            {
              id: '101',
              title: '新东大鸡排  (件/20公斤)',
              price: '170.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '鱼丸\虾丸（件/10公斤）',
              price: '115.00',
              selectNum: 0,
            }
          ],
        },
        {
          cateName: '肉类',
          goodsList: [
            {
              id: '101',
              title: '新东大鸡排  (件/20公斤)',
              price: '170.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '牛肉（斤）',
              price: '45',
              selectNum: 0,
            }
          ],
        },
        {
          cateName: '调味品',
          goodsList: [
            {
              id: '101',
              title: '酸汤料  (件/10袋)',
              price: '280.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '椒麻料（件/18袋）',
              price: '200.00',
              selectNum: 0,
            },
            {
              id: '101',
              title: '咖喱粉（件/6袋）',
              price: '850',
              selectNum: 0,
            }
          ],
        },
        {
          cateName: '零食饮料',
          goodsList: [
            {
              id: '101',
              title: '可口可乐 (件/1箱)',
              price: '50.00',
              selectNum: 0,
            }
          ],
        },
        { cateName: '其他' },
      ],

      activeKey: 0,
      goodsList: [],
      goodsNum: undefined,
      showInput: false,
      showInput2: false,
      showInput3: false,
      popUpNum: '',
      curIndex: -1,
      submitBarHeight: 46,
      bottomHeight: 'padding-bottom: 46px;',
      currentDate: ''
    }
  },
  mounted() {
    const submitBarHeight = this.$refs.submitBar.offsetHeight;
    console.log('底部菜单栏高度：', submitBarHeight);
    // const footerMenu=this.$refs.footerMenu.footerMenu
    // console.log('底部菜单栏高度111aaa：', footerMenu);
    this.bottomHeight = `padding-bottom: ${Number(menuHeight)}px;`
    console.log(this.bottomHeight, 'bottomHeight')

    // 当天日期
    const timestamp = new Date().getTime();
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    this.currentDate = `${year}-${month}-${day}`;
    console.log(this.currentDate, 'this.currentDate');
  },
  created() {
    this.sidebarList.forEach((item, index) => {
      console.log(item, index, 'ooooo')
      if (this.activeKey == index) {
        this.goodsList = item.goodsList
      }
    })

  },
  methods: {

    onClose() {

    },

    toCheck() {
      this.$router.push({ path: '/selectFillIn' })
    },
    onChangeSidebar(e) {
      this.activeKey = e
      console.log(this.activeKey, e, 'e sideBar')
      this.sidebarList.forEach((item, index) => {
        if (this.activeKey == index) {
          this.goodsList = item.goodsList
        }
      })
    },
    // 查看清单
    toRecordList() {
      this.showInput3 = true
    },
    // 去tijiao
    onSubmit() {
      this.showInput2 = true
    },
    submit2() {
      this.showInput2 = false
      Toast('提交成功')
      const item = {}
      item.isSubmit = true
      this.$router.push({
        path: '/index',
        query: { item: JSON.stringify(item) }
      })
    },
    //数字+
    add(index, id) {
      let num
      this.sidebarList.forEach((item, val) => {
        if (this.activeKey == val) {
          item.goodsList.forEach((ele, ss) => {
            if (index === ss) {
              num = Number(ele.selectNum)
              num++
              ele.selectNum = num
            }
            this.goodsNum = num
          })
        }

      })
      console.log(num, this.goodsNum, '++++')
    },

    //数字减
    jian(index, Id, cartNum) {
      let num
      this.sidebarList.forEach((item, val) => {
        if (this.activeKey == val) {
          item.goodsList.forEach((ele, ss) => {
            if (index === ss) {
              if (ele.selectNum > 1) {
                ele.selectNum--
              } else if (ele.selectNum <= 1 && ele.selectNum >= 0) {
                Toast('该宝贝数量不能在减少了哟！')
              }
            }
            this.goodsNum = num
          })
        }

      })
      console.log(num, this.goodsNum, '-----')
    },
    // 输入数字
    showInputNum(item, index) {
      this.curIndex = index
      this.popUpNum = item.selectNum
      this.showInput = true
      console.log(111, item)
    },// 确认按钮
    confirmFilter() {
      // console.log('确认', this.goodsList[this.curIndex])
      this.goodsList[this.curIndex].selectNum = this.popUpNum
      // console.log(this.goodsList)
      this.showInput = false
    },
    // 关闭弹窗
    closePopup() {
      this.showInput = false
    }
  },
  beforeDestroy() {
    console.log('index')
    window.removeEventListener('scroll', this.onLoad, true)
  },
}
</script>

<style lang="less" scoped>
/* eslint-disable */
span,
p {
  padding: 0;
  margin: 0;
}

/deep/.van-tab {
  z-index: 200;
  height: 44px;
  //  background:rgb(216, 143, 143);
}

/deep/.van-tabs__wrap .van-tabs__wrap--scrollable {
  position: fixed;
}

/deep/.van-tab--active {
  /* color: rgb(255, 152, 82); */
}

/deep/.van-tabs__line {
  height: 0.6vw;
  background-color: rgb(255, 152, 82);
}

.content {
  overflow: hidden;
  background-color: #f9f9f9;
}

.contentTop {
  background-color: white;
  padding: 25px 24px;
  margin-top: 42px;
  display: flex;
  align-items: center;

  .contentTop-left {
    width: 54px;
    height: 54px;
    border-radius: 54px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contentTop-right {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-left: 16px;
  }

  .contentTop-right-top {
    font-size: 18px;
    text-align: left;
    color: #000000;
    line-height: 18px;
  }

  .contentTop-right-bottom {
    font-size: 16px;
    line-height: 16px;
    text-align: left;
    color: #000000;
    margin-top: 12px;
    height: 100%;
  }
}

.contentBottom {
  background-color: #f9f9f9;
  display: flex;


  .sidebar_content {
    width: calc(100% - 116px);
    padding-top: 5px;
  }
}

// 右侧 内容  
.goods-box {
  background-color: #ffffff;
  padding: 12px 24px;
  margin-bottom: 5px;

  .goods-title {
    font-size: 16px;
    line-height: 16px;
    text-align: left;
    color: #000000;
  }

  .goods-box-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;

    .goods-price {
      font-size: 15px;
      line-height: 15px;
      text-align: left;
      color: #999999;
    }

    .goods-num {
      display: flex;
      align-items: center;

      .selectnum {
        font-size: 15px;
        text-align: center;
        color: #999999;
        margin: 0px 6px;
      }
    }

    .plus {
      width: 15px;
      height: 15px;
      background: #047DCB;
      border: none;
    }
    /deep/ .plus  .van-button--normal {
      color: #ffffff !important;
      padding: 10px;
    }
    .minus {
      width: 15px;
      height: 15px;
      border: 1px solid #047DCB;
      background: transparent;
      color: #047DCB;
    }
    /deep/.minus .van-button--normal {
        color: #047DCB !important;
        padding: 10px;
      }

  }
}

.goods-box-top {
  border-top: 1px solid #e5e5e5
}


/*清浮动*/
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.clearfix {
  zoom: 1;
}

// 去逛逛
.loginBtn {
  width: 100%;
  height: 45px;
  border: none;
  background: #047DCB;
  border-radius: 45px;
}

.tips {
  margin-top: 25px;
  font-size: 14px;
  text-align: right;
  color: #000000;
  line-height: 14px;
}

// sidebar
::v-deep .van-sidebar {
  width: 116px !important;
  height: 100vh;
  background-color: #f9f9f9;
  white-space: nowrap;
  /* 防止文本换行 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 显示省略号 */
}

// 未选中的样式
::v-deep .van-sidebar-item {
  // font-weight: bold;
  font-size: 26rpx;
  line-height: 26rpx;
  text-align: center;
  color: #888888;
  border: none !important;
}

// 选中的样式
::v-deep .van-sidebar-item--selected {
  // font-weight: bolder;
  line-height: 32rpx;
  font-size: 32rpx;
  text-align: center;
  color: #111111;
}

::v-deep .van-sidebar-item--select::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.10667rem;
  height: 0.42667rem;
  background-color: transparent;
  transform: translateY(-50%);
  content: '';
}

.submitBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  position: fixed !important;
  bottom: 0px;
  z-index: 2;
  // width: 100%;
  // width: calc(100% - 48px);
  // margin-left: 24px;
  // margin-right: 24px;

  .allPrice {
    font-size: 15px;
    text-align: left;
    color: #000000;
    line-height: 15px;
  }

  .checked {
    font-size: 12px;
    line-height: 12px;
    text-align: left;
    color: #999999;
  }

  .loginBtn {
    width: 88px;
    height: 30px;
    border: none;
    background: #047DCB;
    border-radius: 45px;
  }
}

// 非弹出窗底部按钮区域宽度
.submitBar_width {
  width: calc(100% - 48px);
  padding-left: 24px;
  padding-right: 24px;
  background: #f9f9f9;
}

// 弹出窗 底部按钮区域  
.submitBar_popup {
  padding-left: 24px;
  padding-right: 24px;
  width: calc(100% - 48px);
  position: fixed;
  background: #f9f9f9;
}

.pop_title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #000;
  font-size: 15px;
  text-align: center;
  margin-top: 21px;
}

.sub_btn {
  width: 80%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 22px;
  color: #fff;
  background: #047DCB;
  margin: 8px auto;
  font-size: 15px;
}

.top_title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #000;
  font-size: 15px;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 30px;
}

/**.清单 */
.popupList {
  max-height: 80vh;
  padding-top: 20px;
}

.popupWrapper {
  padding-left: 24px;
  padding-right: 24px;
}

.top_title3 {
  width: 100%;
  // height: 30px;
  // line-height: 30px;
  color: #000;
  font-size: 15px;
  padding-bottom: 24px;

}

// 弹窗 内容区域
.popup-goods-box {
  // margin-left: 24px;
  // margin-right: 24px;
  height: 70vh;
}

.submitBar_left {
  display: flex;
  align-items: center;
}

// 购物车上的数字
.cartInfo {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 18px;
  height: 18px;
  background: #FF0000;
  color: #ffffff;
  border-radius: 50%;
}

/deep/.van-button--default {
  background-color: transparent;
  padding: 0px;
}
</style>
